<script setup lang="ts">
	const form = reactive({
		name: '',
		post: '',
		isRead: false,
	});
</script>

<template>
	<section class="personal px-40px py-20px h-full">
		<h2 class="font-800 text-18px mb-8px">个人资料</h2>
		<a-form
			:model="form"
			layout="vertical"
			class="w-600px!"
		>
			<a-form-item field="post">
				<template #label>
					<div class="mt-10px mb-5px">
						<div class="font-600 text-15px">头像</div>
					</div>
				</template>
				<div class="flex flex-row">
					<a-image
						:preview="true"
						width="80px"
						height="80px"
						class="rounded-5px border-1px border-#333 cursor-pointer"
						src="http://localhost:9999/admin-api/oss/file/preview/67ac60b37276642fb2956cb0.jpg"
					/>

					<div class="flex flex-col justify-between ml-25px py-5px">
						<a-button class="w-100px! mb-10px rounded-5px">
							<template #icon>
								<icon-upload />
							</template>
							上传
						</a-button>
						<div class="text-12px text-#999">我们建议使用pngs，jpegs，gifs，并且不超过10MB</div>
					</div>
				</div>
			</a-form-item>

			<a-form-item field="name">
				<template #label>
					<div class="mt-5px">
						<div class="font-600 text-15px">名字</div>
						<div class="text-12px text-#999">这是您即将展示的名字</div>
					</div>
				</template>
				<div class="flex justify-between w-full">
					<div class="w-47%">
						<div class="text-14px text-#666 mb-5px">姓</div>
						<a-input
							class="rounded-5px"
							v-model="form.name"
							placeholder="请输入"
						/>
					</div>

					<div class="w-47%">
						<div class="text-14px text-#666 mb-5px">名</div>
						<a-input
							class="rounded-5px"
							v-model="form.name"
							placeholder="请输入"
						/>
					</div>
				</div>
			</a-form-item>

			<a-form-item field="post">
				<template #label>
					<div class="mt-10px mb-5px">
						<div class="font-600 text-15px">邮箱</div>
						<div class="text-12px text-#999">这是您在公司的邮箱地址</div>
					</div>
				</template>
				<a-input
					class="rounded-5px"
					v-model="form.post"
					placeholder="请输入邮箱地址"
				/>
			</a-form-item>

			<a-form-item field="post">
				<template #label>
					<div class="mt-10px mb-5px">
						<div class="font-600 text-15px">性别</div>
						<div class="text-12px text-#999">选择您的性别</div>
					</div>
				</template>
				<a-select
					class="rounded-5px"
					v-model="form.post"
					placeholder="Please select ..."
					allow-clear
				>
					<a-option value="section one">Section One</a-option>
					<a-option value="section two">Section Two</a-option>
					<a-option value="section three">Section Three</a-option>
				</a-select>
			</a-form-item>

			<a-form-item field="post">
				<template #label>
					<div class="mt-10px mb-5px">
						<div class="font-600 text-15px">语言</div>
						<div class="text-12px text-#999">选择您系统的操作语言</div>
					</div>
				</template>
				<a-select
					class="rounded-5px"
					v-model="form.post"
					placeholder="Please select ..."
					allow-clear
				>
					<a-option value="section one">Section One</a-option>
					<a-option value="section two">Section Two</a-option>
					<a-option value="section three">Section Three</a-option>
				</a-select>
			</a-form-item>

			<a-form-item>
				<a-space
					size="medium"
					class="w-full justify-center mt-20px"
				>
					<a-button
						class="rounded-5px"
						html-type="submit"
						status="normal"
						type="primary"
					>
						<template #icon>
							<icon-pen-fill />
						</template>
						提交
					</a-button>
					<a-button
						class="rounded-5px"
						status="danger"
					>
						<template #icon>
							<icon-refresh />
						</template>
						重置
					</a-button>
				</a-space>
			</a-form-item>
		</a-form>
	</section>
</template>
